<html>

<head>
    <title>多列布局</title>
    <style>
        body {
            width: 640px;
            margin: 0 auto;
        }
        .container {
            column-width: 300px;
            column-gap: 20px;
        }
        .card  {
            border: 2px solid rgb(80, 180, 220);
            background-color: rgb(207, 232, 220);
            padding: 10px;
            margin: 0 0 1em 0;

            /* 避免内容折断 */
            break-inside: avoid;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="card">
            <h2>I am the heading</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
                aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
                pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
                at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
                Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
            </p>
        </div>

        <div class="card">
            <h2>I am the heading</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
                aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
                pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
                at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
                Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
            </p>
        </div>

        <div class="card">
            <h2>I am the heading</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
                aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
                pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
                at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
                Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
            </p>
        </div>
        <div class="card">
            <h2>I am the heading</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
                aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
                pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
                at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
                Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
            </p>
        </div>

        <div class="card">
            <h2>I am the heading</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
                aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
                pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
                at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
                Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
            </p>
        </div>

        <div class="card">
            <h2>I am the heading</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
                aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
                pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
                at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
                Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
            </p>
        </div>

        <div class="card">
            <h2>I am the heading</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
                aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
                pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
                at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
                Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
            </p>
        </div>
    </div>
</body>

</html>